feat(shared): onboarding personas quick-start with tag pop animation#5939
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
davidercruz
force-pushed
the
davidercruz/onboarding-personas
branch
from
c84271f to
7e26f0f
Compare
8 tasks
davidercruz
force-pushed
the
davidercruz/onboarding-personas
branch
from
7e26f0f to
347980f
Compare
Adds an A/B-gated persona picker inside the onboarding tag step, plus a rework of how recommended tags accumulate, fade out, and animate during onboarding. Highlights: - PersonaSelector renders the API-backed persona list using existing Button chip primitives so it matches the tag picker visually. - Multi-select up to 3 personas; the 4th persona pill goes disabled until one is deselected. - Per-persona-tag fan-out for recommendations: each persona-tag fires its own recommendedTags request in parallel, results dedupe and cap at 12 visible. - Round-robin merge across the per-seed responses so every seed contributes before any one seed's later results pile in (fixes AI/ML personas where overlapping clusters were starving classical data-science suggestions). - Manual tag clicks always fetch fresh recommendations and add them to the screen; the eviction sweep that fades unselected recos out only runs every 10th manual click. - Curated baseline tags fade out once the user has manually picked REQUIRED_TAGS_THRESHOLD individual tags; persona clicks don't count toward the threshold. - New tag-pop, tag-spark, and tag-fade-out Tailwind keyframes; a procedural spark burst lifted from the leaderboard crown-spark pattern decorates each pop. - onAnimationEnd routed by event.animationName so pop, spark, and fade-out events don't conflict. - onboardingPopBus module event bus lets TagElement react to persona clicks and TagSelection react to recommend requests without prop-drilling. - Mobile auto-scroll: the first persona click smooth-scrolls to the top of the tag area. - When the persona flag is on, the headline reads "Tune your feed" with subtitle "Pick a role to start fast, then add tags you like." This currently overrides the funnel/modal-supplied headline in code; a TODO marks it for removal once Freyja ships the new copy. - useRecommendedTags hook centralises the mutation, slicing, splice-at-anchor, and prune logic. Tags currently selected by the user are never evicted, even if a new recommendation batch supersedes them. Backend (onboardingPersonas query) is already shipped in daily-api. Gated behind featureOnboardingPersonas (default false). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Users enrolled in featureOnboardingPersonas now automatically get the recswipe-backed onboardingRecommendTags mutation as their recommender, without needing to also be enrolled in featureOnboardingTagRecommender. OR-ing the two flags inside TagSelection keeps the recommender choice local to the component and avoids requiring ops to coordinate dual enrolment in #experiments. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
davidercruz
force-pushed
the
davidercruz/onboarding-personas
branch
from
48fdc0e to
5e6a3e7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Adds an A/B-gated persona picker (Frontend, Backend, AI/ML, DevOps, etc.) inside the onboarding tag step. Selecting a persona batch-follows ~10 curated tags via the existing
useTagAndSource().onFollowTagspath, and a small staggered pop animation runs across the matching tag chips so the selection reads as intentional.PersonaSelectorrenders the API-backed persona list using existingButtonchip primitives (Float/Primary+Cabbage) so visual style stays consistent with the tag pickerrecommendedTagsrequest in parallel, results dedupe and cap at 8 visibleREQUIRED_TAGS_THRESHOLD(5) individual tags; persona clicks don't count toward the thresholdtag-popkeyframe + procedural spark burst lifted from the leaderboardcrown-sparkpatterntag-fade-outkeyframe for the eviction animation;onAnimationEndis routed byevent.animationNameso pop, spark, and fade-out events don't conflictonboardingPopBusmodule event bus letsTagElementreact to persona clicks (andTagSelectionreact to recommend requests) without prop-drillingonboardingPersonasquery) is already shipped in daily-apiPre-merge
Important
Update Freyja funnel JSON for the persona-experiment variant to set the EditTags step's
headlineparameter to"Tune your feed". Once Freyja serves the new copy, the in-code override inEditTag.tsx(search for theTODO: drop this override once Freyja's persona-experiment variant ships the new headline directlycomment) can be removed.Events
select onboarding personatarget_type: 'persona',target_id: <persona id>,extra: { action: 'select' | 'deselect', tags_count, active_count }Experiment
Yes — gated behind the new
onboarding_personasGrowthBook flag (featureOnboardingPersonas, defaultfalse). Slack#experimentsenrolment to be posted before merge.Important
Please do not merge the PR until the experiment enrolment is approved.
Manual Testing
On those affected packages:
Did you test the modified components media queries?
Did you test on actual mobile devices?
🤖 Generated with Claude Code
Preview domain
https://davidercruz-onboarding-personas.preview.app.daily.dev